<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 260px;
        }

        div.whiteborder {
            border: 2px white solid;
        }

        div.redDiv {
            background-color: red;
        }

        div.blueBorder {
            border: 5px blue solid;
        }
    </style>

    <script type="text/javascript" src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $divEle = $('div:first');

            $('#btn01').click(function () {
                //addClass() - 向被选元素添加一个或多个类
                $divEle.addClass('redDiv blueBorder');
            });

            $('#btn02').click(function () {
                //removeClass() - 从被选元素删除一个或多个类
                //加字符串参数时，会移除字符串代表的class
                $divEle.removeClass('redDiv');
                //不加参数时，会移除所有的 class
                // $divEle.removeClass();
            });


            $('#btn03').click(function () {
                //toggleClass() - 对被选元素进行添加/删除类的切换操作
                //切换就是如果具有该类那么删除，如果没有那么添加上
                $divEle.toggleClass('redDiv');
            });

            $('#btn04').click(function () {
                //offset() - 返回第一个匹配元素相对于文档的位置。
                //注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距
                var offset = $divEle.offset();
                console.log(offset);
                console.log(offset.top);
                console.log(offset.left);
                //调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left
                $divEle.offset({top: 10, left: 30});
            });
        })
    </script>
</head>
<body>
<table align="center">
    <tr>
        <td>
            <div class="border">
            </div>
        </td>

        <td>
            <div class="btn">
                <input type="button" value="addClass()" id="btn01"/>
                <input type="button" value="removeClass()" id="btn02"/>
                <input type="button" value="toggleClass()" id="btn03"/>
                <input type="button" value="offset()" id="btn04"/>
            </div>
        </td>
    </tr>
</table>


<br/> <br/>


<br/> <br/>


</body>
</html>
